
<template>
    <div>
      <el-button type="primary" size="default" @click="isDialogShow = !isDialogShow">新增角色</el-button>
      <el-cascader
      :options="data"
      v-model="value"
      :props="{ checkStrictly: true,label:'title',value:'id' }"
      clearable></el-cascader>
      <el-dialog
        title="新增角色"
        :visible.sync="isDialogShow"
        width="70%"
        @close="">
        <el-form :model="form" ref="form" label-width="80px" :inline="false" size="normal">
          <el-form-item label="选择菜单">
            <el-row :gutter="20">
              <el-col :span="12" :offset="0">
                <el-checkbox v-model="isClose" @change="closeEvents">展开/关闭</el-checkbox>
                <el-checkbox v-model="toggle" @change="toggleSelected">全选/反选</el-checkbox>
              </el-col>
              
              
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12" :offset="0">
                  <!-- :default-expanded-keys="expandedKeys" -->
                  <el-tree
                    :data="data"
                    show-checkbox
                    node-key="id"
                    @node-expand="treeClick"
                    @node-collapse="treeClick"
                    @check="treeChange"
                    ref="tree"
                    :props="defaultProps">
                  </el-tree>
                </el-col>
              </el-row>
            
              <!-- <el-button type="primary" size="default" @click="addid">添加id</el-button> -->
              
            
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">新增</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
        
        <!-- <span slot="footer">
          <el-button @click=" = false">Cancel</el-button>
          <el-button type="primary" @click="">OK</el-button>
        </span> -->
      </el-dialog>
      
    </div>
</template>

<script>

import {
  findAllPermissions,
  saveRolePermissions
} from "@/api/auth/roles/index"
export default {
    data() {
        return {
          value:"",
          expandedKeys:[
        
          ],
          // currentSelectedIds:[], 
          ids:[], // 用于保存获取到的id
          isDialogShow:false,
          isClose:false,
          toggle:false,
          data: [],
        defaultProps:{
          label:"title",
          children:"children"
        },
          form:{
            "createTime": "",
            "id": "",
            "isDeleted": "",
            "modifyTime": "",
            "permissionIds": [  // // 当前选中 的id组成的数据
            ],
            "remark": "张三的描述",
            "roleCode": "1231411",
            "roleName": "张三"
          }
        };
    },
    computed: {

    },
    created() {
      findAllPermissions()
      .then(res =>{
        // res.data.menus.
        this.data = res.data.menus;
        var arr = []
        this.getAllIds(res.data.menus,arr);
        console.log(arr)
        this.ids = arr;
      })
    },
    mounted() {

    },
    methods: {
      treeChange(val,val1){
        console.log(val1.checkedKeys)
        if(val1.checkedKeys.length == this.ids.length){
          this.toggle = true
        }else{
          this.toggle = false
        }
        this.form.permissionIds = val1.checkedKeys;
      },
      toggleSelected(){
        if(this.toggle){
          // 全部选中
          this.$refs.tree.setCheckedKeys(this.ids)
          this.form.permissionIds = this.ids;
        }else{
          // 节点取消选中
          this.$refs.tree.setCheckedKeys([])
          this.form.permissionIds = [];
        }

      },
      treeClick(val,val1,val2){
        // 控制多选框选中或者取消选中
      //  console.log(val,val1,val2)
      //   var arr = [];
      //   for(var i  in val2.tree.store.nodesMap){
           
      //       arr.push(  val2.tree.store.nodesMap[i])
      //   }
      //   var bol = arr.every(ele =>ele.expanded)
      //   this.isClose = bol;
      //   console.log(bol)
      },
      closeEvents(){
        for(var i  in this.$refs.tree.store.nodesMap){
            this.$refs.tree.store.nodesMap[i].expanded = this.isClose
          }
        // if(this.isClose){
        //   // 全部展开
        //   // this.expandedKeys = this.ids;
        //   console.log(this.$refs.tree.store.nodesMap)
        //   for(var i  in this.$refs.tree.store.nodesMap){
        //     this.$refs.tree.store.nodesMap[i].expanded = true
        //   }
        // }else{
        //   // 全部关闭
        //   // this.expandedKeys = []
        //   for(var i  in this.$refs.tree.store.nodesMap){
        //     this.$refs.tree.store.nodesMap[i].expanded = false
        //   }
        // }
      },
      onSubmit(){
        saveRolePermissions(this.form)
      },
      // 用于获取所有的id
      getAllIds(val,arr){
        val.forEach(ele =>{
          arr.push(ele.id);
          if(ele.children&&ele.children.length){
            this.getAllIds(ele.children,arr)
          }
          if(ele.type == 2){
            ele.disabled = true
            delete ele.children
          }
        })
      },
      addid(){
        this.expandedKeys.push("1655857985384214530")
      }
    },
};
</script>

<style scoped lang="scss">

</style>
